<template>
  <div class="singer-category">
    <div v-for="(item, key) in singerCategoryObj" :key="key" class="px-3">
      <ul class="d-flex flex-wrap text-gray text-xs">
      	<li v-for="(value, index) in item" :key="value.id" class="p-1 m-1"
        :class="{'singer-category-active': activeIndex[key] === index}"
        @click="singerCategoryClick(key,index)">{{value.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        singerCategoryObj: {
          type: [{name: '全部',id: -1},{name: '男歌手',id: 1},{name: '女歌手',id: 2},{name: '乐队',id: 3}],
          area: [{name: '全部',id: -1},{name: '华语',id: 7},{name: '欧美',id: 96},{name: '日本',id: 8},{name: '韩国',id: 16},{name: '其他',id: 0}]
        },
        activeIndex: {
          type: 0,
          area: 0
        }
      }
    },
    methods: {
      singerCategoryClick(key,index) {
        this.activeIndex[key] = index
        const params = {}
        for(let key in this.activeIndex){
          params[key] = this.singerCategoryObj[key][this.activeIndex[key]].id
        }
        this.$emit('category-click', params)
      }
    }
  }
</script>

<style>
</style>
